<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='../vue.js'></script>
</head>

<body>
  <div id="app">
    <!-- 
      v-bind:vue中提供的用于绑定属性的命令，强制绑定数据(数据单向绑定 data ----》attr)

      比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定

      v-bind:attr="xxx":给attr属性强制绑定xxx数据

      v-bind可以简写为一个 :(冒号)

     -->
    h1 arti="name">{{msg + 1}}</h1>
    <h1 v-bind:study="name">{{msg + 2}}</h1>
    <h1 v-bind:study.prop="name">{{msg + 3}}</h1>
    <h1 v-bind:count="count + 1">{{msg + 4}}</h1>
    <h1 v-bind:hot="isHot? 're' : 'leng' ">{{msg + 5}}</h1>
    <h1 v-bind:src="src">{{msg + 6}}</h1>
    <h1 v-bind:src=" 'http://www.baidu.com/' + src">{{msg + 7}}</h1>
    
  </div>

  <script>
    const vm = new Vue({
      data() {
        return {
          msg: "😢",
          name: "老六",
          count: 1,
          isHot: true,
          src: "01.jpg",
        }
      }
    })
    vm.$mount("#app")

  </script>
</body>

</html>